<template>
  <div id="reprots">
    <div>
      <card>

        <div slot="header">
          {{data.name}}
        </div>
        <div slot="content">
          <p>{{data.event.name}}</p>

        </div>

        <div slot="footer" class="card-demo-flex card-demo-content01">
          <div class="vux-1px-r">
            <span>{{data.gender=='male'?'男':'女'}}</span>
            <br/> 性别
          </div>
          <div class="vux-1px-r">
            <span>{{data.bib}}</span>
            <br/> 参赛号
          </div>
          <div class="vux-1px-r">
            <span v-if='data.report.state=="FINISH"'>完赛</span>
            <span v-if='data.report.state=="DNF"'>没有完赛</span>
            <span v-if='data.report.state=="DNS"'>没有参赛</span>
            <span v-if='data.report.state=="DSQ"'>成绩取消</span>
            <br/> 状态
          </div>

        </div>

      </card>

      <flexbox class='info' v-if='data.report.state=="FINISH"'>
        <!-- <flexbox-item v-if='data.gender=="male"'><div class="flex-demo"><p>NO.{{data.report.position.gender.time.total}}</p><p>男榜排行榜</p></div></flexbox-item>
      <flexbox-item  v-if='data.gender=="female"'><div class="flex-demo"><p>NO.{{data.report.position.gender.time.total}}</p><p>女榜排行榜</p></div></flexbox-item> -->
        <flexbox-item>
          <div class="flex-demo">
            <p>{{data.report.time}}</p>
            <p>枪声成绩</p>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <p>{{data.report.nettime}}</p>
            <p>净成绩</p>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <p>{{data.report.pace}}</p>
            <p>配速</p>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <p>{{data.report.speed}}</p>
            <p>时速</p>
          </div>
        </flexbox-item>
        <!-- console.log(((42195/1000)/(this.timeSecond/3600)).toFixed(2)) -->
        <!-- (((data.event.distance/1000)/(this.timeSecond/3600)).toFixed(3)) -->

      </flexbox>

      <h3>排名</h3>
      <x-table v-if='data.report.state=="FINISH"' :cell-bordered="false" style="background-color:#fff">
        <thead>
          <tr style="background-color: #F7F7F7">
            <th></th>
            <th colspan="2">成绩排名</th>
            <th colspan="2">净成绩排名</th>
          </tr>
        </thead>
        <tr>
          <td></td>
          <td>所有选手</td>
          <td>年龄组</td>
          <td>所有选手</td>
          <td>年龄组</td>
        </tr>
        <tr>
          <td v-if='data.gender=="male"'>排名(男子)</td>
          <td v-if='data.gender!="male"'>排名(女子)</td>
          <td>{{data.report.position_gender}}</td>
          <td>{{data.report.position_age_gender}}</td>
          <td>{{data.report.position_gender_net}}</td>
          <td>{{data.report.position_age_gender_net}}</td>
        </tr>
        <tr>
          <td>总排名</td>
          <td>{{data.report.position_total}}</td>
          <td>{{data.report.position_age}}</td>
          <td>{{data.report.position_total_net}}</td>
          <td>{{data.report.position_age_net}}</td>
        </tr>
      </x-table>

      <h3>分段用时</h3>
      <x-table :cell-bordered="false" style="background-color:#fff">
        <thead>
          <tr style="background-color: #F7F7F7">
            <th>计时点</th>
            <th>用时</th>
            <th>分段用时</th>
            <th>配速(m:s/km)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if='!(item.name==="50公里")' v-for="(item,index) in data.report.split">
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <!-- <td v-if='index==0'>--:--:--</td> -->
            <td>{{item.splittime}}</td>
            <!-- <td v-if='index==0'>--:--:--</td> -->
            <td>{{item.pace}}</td>
          </tr>
        </tbody>
      </x-table>

      <div class="container needsclick" style="wdith:100%;height:400px;margin-top:10px"></div>

      <div v-if='imgOrigin' class="achievement">
        <p>成绩证书</p>
        <div v-if="!!showImg">
          <div class="imgWarpper">
            <div>
              <a :href="imgOrigin"><img :src="img" alt=""></a>
            </div>
          </div>
        </div>

        <div style="padding: 15px;
    line-height: 1.5;
    background: #ccc;text-align: left;" v-if='!showImg'>
          项目前20名选手须待公示期（赛后{{day}}个工作日）结束后，方可在官网下载证书。
        </div>

      </div>

    </div>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";

import {
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Card,
  Flexbox,
  FlexboxItem,
  XTable
} from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isIdNumber, formatTime } from "@/common/js/main.js";

export default {
  props: ["page", "host", "data", "index", "raceId"],
  data() {
    return {
      day: "",
      raceinfo: {},
      showImg: true,
      indexNumber: "",
      buttonFlag: true,
      isShowScores: false,
      img: "",
      imgOrigin: "",
      reportConfig: {}
    };
  },
  computed: {
    // dataList: function() {
    //   let array = [];
    //   // let array = [];
    //   // let index = 0;
    //   // for (let key in this.data.report.split) {
    //   //   array[index] = {};
    //   //   array[index].mileage = key;
    //   //   array[index].time = this.data.report.split[key];
    //   //   index++;
    //   // }
    //   array = this.data.report.split;

    //   array.unshift({
    //     name: "起点",
    //     distance: 0,
    //     time: "00:00:00"
    //   });

    //   array.sort(function(a, b) {
    //     return a.distance - b.distance;
    //   });

    //   for (let i = 0; i < array.length - 1; i++) {
    //     let oldTimeArray = array[i].time.split(":");

    //     let newTimeArray = array[i + 1].time.split(":");

    //     let oldDistance = array[i].distance;
    //     let newDistance = array[i + 1].distance;

    //     //let timeArray = array.time.split(":");
    //     let oldTimeSecond =
    //       (oldTimeArray[0] >> 0) * 3600 +
    //       (oldTimeArray[1] >> 0) * 60 +
    //       (oldTimeArray[2] >> 0);
    //     let newTimeSecond =
    //       (newTimeArray[0] >> 0) * 3600 +
    //       (newTimeArray[1] >> 0) * 60 +
    //       (newTimeArray[2] >> 0);

    //     let timeSecond = newTimeSecond - oldTimeSecond;
    //     let distance = newDistance - oldDistance;

    //     let subsectionTime = formatTime(timeSecond);

    //     let chipTime = formatTime(timeSecond / distance);

    //     array[i + 1].chipTime = chipTime;
    //     array[i + 1].subsectionTime = subsectionTime;
    //   }

    //   return array;
    // },
    timeSecond: function() {
      //this.data.report.nettime='04:56:41'
      let timeArray = this.data.report.nettime.split(":");
      let time =
        (timeArray[0] >> 0) * 3600 +
        (timeArray[1] >> 0) * 60 +
        (timeArray[2] >> 0);
      return time;
    }
  },
  created() {
    let _this = this;
    //console.warn(this.data.report.certificate+'110')
    this.img = this.data.report.certificate;
    this.imgOrigin = this.data.report.certificate_origin;
    this.raceinfo = JSON.parse(window.localStorage.getItem("raceinfo"));
    //console.log(this.raceinfo)

    //赛事证书配置
    //day 公示的天数
    //racdid 关联的比赛
    //time time[0]公示开始时间 time[1]公示结束时间
    axios.get("https://r3.ihuipao.cn/wuxih5/report.json?" + Math.random()).then(
      response => {
        //console.log('---')
        //console.log(response.data)

        //data = response.data;
        _this.reportConfig = response.data;

        console.log(_this.reportConfig);

        _this.reportConfig.forEach((item, index) => {
          //如果比赛再配置项里面
          if (item.raceid == _this.reportConfig.id) {
            _this.day = item.day;

            if (!!_this.data.report) {
              //this.data.report.position_gender = 1;
              if (
                !!_this.data.report.position_gender &&
                _this.data.report.position_gender < 20
              ) {
                //alert(1)
                _this.showImg = false;
              } else if (
                !!_this.data.report.position_gender_net &&
                _this.data.report.position_gender_net < 20
              ) {
                _this.showImg = false;
              } else {
                _this.showImg = true;
              }
            }
          }
        });
      },
      error => {
        console.log(error);
      }
    );
  },
  mounted() {
    this.heightChart();
  },
  methods: {
    getGverageTime() {
      let gverageTime =
        this.timeSecond / 60 / (this.data.event.distance / 1000);
      let minute = gverageTime >> 0;

      let second =
        (Number("0." + gverageTime.toString().split(".")[1]) * 60) >> 0;
      second < 10 ? (second = "0" + second) : (second = second);

      //console.log(minute+':'+second)
      return minute + ":" + second;
    },
    heightChart() {
      //console.log(111)
      let _this = this;
      let seriesData = [];
      let xlabes = [];
      //console.warn('---')
      //console.warn(this.data.report.split)
      for (let i = 0; i < this.data.report.split.length; i++) {
        //console.log('--')
        //console.log(this.data.report.split[i].name)
        if (this.data.report.split[i].name === "50公里") {
          //console.log(this.data.report.split[i])
          this.data.report.split.splice(i, 1);
          break;
        }
        //console.log(this.data.report.split[i])
        console.log(this.data.report.split);
        seriesData.push(this.data.report.split[i].speed);

        xlabes.push(this.data.report.split[i].name);
        //console.warn('---')
        //console.log((timeArray[0] >> 0)*60)
        //console.log(timeArray[1] >> 0)
        //console.log(timeArray[2] >> 0)
        // seriesData[i] = Number(
        //   (timeArray[0] >> 0) * 60 +
        //     (timeArray[1] >> 0) +
        //     "." +
        //     (timeArray[2] >> 0)
        // );
        //console.log(seriesData[i])
      }

      // while (index-- > 1) {
      //   xData[index] = this.dataList[index].name;

      //   if (index == 1) {
      //     this.dataList[index].chipTime = "00:00:00";
      //   }

      //   let timeArray = this.dataList[index].chipTime.split(":");

      //   seriesData[index] = Number(
      //     ((timeArray[0] >> 0) * 60 + timeArray[1]) >> (0 + "." + timeArray[2])
      //   );
      // }

      //console.log(_this.data);

      console.warn(xlabes);

      let config = {
        credits: {
          enabled: false
        },
        chart: {
          type: "line",
          renderTo: document.querySelectorAll(".container")[this.index] // 或 document.getElementById('container')
        },
        title: {
          text: "成绩报表",
          style: {
            fontSize: "18px",
            fontWeight: "bold"
          }
        },
        subtitle: {},
        legend: {
          enabled: false
        },
        tooltip: {
          shared: true,
          useHTML: true,
          headerFormat: "<div>",
          pointFormatter: function() {
            return (
              "里程" +
              ": <b>" +
              _this.data.report.split[this.index].name +
              "</b><br/>" +
              "用时" +
              ": <b>" +
              _this.data.report.split[this.index].time +
              "</b><br/>" +
              "时速" +
              ": <b>" +
              _this.data.report.split[this.index].speed +
              "</b><br/>" +
              "配速" +
              ": <b>" +
              _this.data.report.split[this.index].pace +
              "</b><br/>"
            );
          },
          footerFormat: "</div>",
          valueDecimals: 2
        },
        xAxis: {
          categories: xlabes
        },
        yAxis: {
          title: {
            text: "时速"
          },
          //reversed: true
          allowDecimals: false,
          floor: 0
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false // 开启数据标签
            },
            enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          }
        },
        series: [
          {
            name: "里程",
            data: seriesData
          }
        ]
      };

      var charts = Highcharts.chart(config);
      //let dom=document.querySelectorAll('.container')
      //console.log(dom[this.index])
      //dom[this.index].highcharts(config)

      //console.log(Highcharts);
    }
  },
  components: {
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Card,
    Flexbox,
    FlexboxItem,
    XTable
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
@import "~vux/src/styles/1px.less";

html,
body {
  height: 100%;
  width: 100%;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

#reprots .weui-panel {
  text-align: center;
  font-size: 40px;
  line-height: 3;
}

#reprots .weui-panel__bd {
  font-size: 20px;
  line-height: 1;
}

#reprots .info {
  text-align: center;
  font-size: 12px;
  line-height: 2;
}
#reprots .info {
  background: white;
}

.achievement {
  width: 100%;
  margin: 0 auto;
  background-color: white;
  text-align: center;
  p {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
  }
  img {
    width: 80%;
  }
}

h3 {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  // background: white;
  text-align: center;
}

.imgWarpper {
  width: 100%;
  & > div {
    padding-left: 10px;
    padding-right: 10px;
  }
  img {
    width: 100%;
  }
}
</style>






